<template>
	<view class="items flex f-d-c" @click.stop="goToItem">
		<view class="user-box flex a-i-c j-c-b">
			<view class="user-info flex a-i-c">
				<image class="avatar" :src="item.user?.avatar" mode=""></image>
				<view class="nickname-time-box flex f-d-c">
					<view class="name f-s-24 color-333 l-h-34">
						{{item.user?.nickname || ""}}
					</view>
					<view class="flex a-i-c f-s-20 color-999">
						{{item.province_text||""}} | 发布于{{item.createtime_text ||""}}
					</view>
				</view>
			</view>
			<view class="setting-view" v-if="showTop">
				<image class="icon" @click.stop="showOperate" src="@/static/images/circle/set-icon.svg" mode=""></image>
				<view class="operate-box flex a-i-c f-d-c" :class="operate_show?'heightauto':'o-height0'">
					<view class="item f-s-28 color-fff flex a-i-c" @click.stop="asss" v-if="item.del_btn">
						<image class="o-icon" src="@/static/images/circle/set-del-icon.svg" mode=""></image>
						删除
					</view>
					<view class="item f-s-28 color-fff flex a-i-c" v-if="item.edit_btn" @click.stop="editInfo">
						<image class="o-icon" src="@/static/images/circle/set-edit-icon.svg" mode=""></image>
						编辑 
					</view>
				</view>
			</view>
			<!-- <image class="del-icon" v-if="!showDel && item.del_btn" src="@/static/images/circle/del-icon.svg" mode=""></image> -->
		</view>
		<view class="info-box color-333 f-w-b">
			{{item.content || ""}}
		</view>
		<!-- <video v-if="show_video" style="width: 750rpx;height: 100vh;position: fixed;top: 0;left: 0;" :id="'a1a'" :controls="true" :src="video_src" mode=""></video> -->
		<!-- <cover-view>
			<text class="color-fff" style="position: fixed;z-index: 9999;color: #ffffff;font-size: 40rpx;">关闭</text>
		</cover-view> -->
		<view class="info-image-list flex f-w-w">
			<block v-for="(itm, index) in item.images" :key="index">
				<block v-if="isVideo(itm)">
					<view class="car-image">
						<image class="video-play-icon" @click.stop="playFullScreen(itm)" src="@/static/live/video-play.png" mode=""></image>
						<dom-video :src="itm" :autoplay="false" :loop="false" :controls="false"></dom-video>
					</view>
					<!-- <image class="car-image" src="@/static/images/circle/video-play.svg" mode=""  @click="playFullScreen('a'+index)"></image> -->
					<!-- <video style="height: 0;width: 0;" :id="'a'+index" :controls="true" :src="itm" mode=""></video> -->
				</block>
				<block v-else>
					<image class="car-image" @click.stop="$prviceImage(item.images)" :src="itm" mode=""></image>
				</block>
			</block>
		</view>
		<view class="caozuo-box flex a-i-c j-c-b">
			<view class="flex a-i-c">
				<view class="item flex a-i-c f-s-28 color-333" @click.stop="shareCarCircle(item)">
					<image class="icon" src="@/static/images/circle/share-icon.svg" mode=""></image>
					{{item.share_count || 0}}
				</view>
				<view class="item flex a-i-c f-s-28 color-333" @click.stop="showBackContent('a',item.id,0,0)">
					<image class="icon" src="@/static/images/circle/input-icon.svg" mode=""></image>
					{{item.comment_count||0}}
				</view>
				<view class="item flex a-i-c f-s-28 color-333" @click.stop="postLike('a',item.id,item.praise_type)">
					<image class="icon" v-if="!item.praise_status" src="@/static/images/circle/like-icon.svg" mode=""></image>
					<image class="icon" v-else src="@/static/images/heard-aceive.svg" mode=""></image>
					{{item.praise_count ||0}}
				</view>
			</view>
			<view class="flex a-i-c color-666 f-s-28" v-if="item.del_btn && false">
				<image class="comment-del-icon" src="@/static/images/circle/comment-del.svg" mode=""></image>
				删除
			</view>
		</view>
		<block v-if="showComment">
			<!-- <block v-for="(items,indexs) in item.hot_comment" :key="indexs"> -->
				
				<!-- <block v-for="(itm, index) in common_list" :key="index">
					
				</block> -->
				<block v-for="(itm, index) in common_list0" :key="index">
					<view class="user-box flex a-i-c j-c-b">
						<view class="user-info flex a-i-c" @click.stop="showBackContent('b',item.id,itm.id,itm.id,index)">
							<image class="avatar2" :src="itm.user?.avatar" mode=""></image>
							<view class="nickname-time-box flex f-d-c">
								<view class="name f-s-28 color-486AB2 l-h-34 f-w-b">
									{{itm.user?.nickname ||""}}<text class="color-8694AC f-s-22 f-w-4" style="margin-left: 5px;">{{itm.createtime_text}}</text>
								</view>
							</view>
						</view>
						<view class="flex f-s-24 color-333" @click.stop="postLike('b',itm.id,itm.praise_type,index)">
							<image class="lick-icon" v-if="!itm?.praise_status" src="@/static/images/circle/like-icon.svg" mode=""></image>
							<image class="lick-icon" v-else src="@/static/images/heard-aceive.svg" mode=""></image>
							{{itm?.praise_count||""}}
						</view>
					</view>
					<view class="user-pinglun f-w-b f-s-28">
						{{itm?.content ||""}}
					</view>
					<block v-for="(items,indexs) in itm.reply||[]" :key="indexs">
						<view class="back-user-box f-w-b flex a-i-c j-c-b">
							<view class="left f-s-26" @click.stop="showBackContent('b',item.id,items.id,items.top_pid,index)">
								<image class="back-avatar" :src="items.user.avatar" mode=""></image>
								<text class="color-486AB2">{{items.user.nickname}} {{items.createtime_text}} </text>
								<text class="color-333">回复:</text>
								<!-- <text class="color-486AB2" >{{itm?.user?.nickname}}</text> -->
								<text class="color-333">{{items.content}}</text>
							</view>
							<view class="flex a-i-c f-s-24" @click.stop="postLike('c',items.id,items.praise_type,index,indexs)">
								<image class="lick-icona" v-if="!items.praise_status" src="@/static/images/circle/unlike-icon.svg" mode=""></image>
								<image class="lick-icona" v-if="items.praise_status" src="@/static/images/heard-aceive.svg" mode=""></image>
								<text class="color-999">赞</text>
							</view>
						</view>
					</block>
					<view class="w-100 f-s-26 color-999" style="text-align: right;" @click.stop="getCommonList(1,itm.id,itm.page,index)">
						{{itm.page === 1?'展开回复':'加载更多'}}
					</view>
					<view class="" style="height: 20rpx;"></view>
				</block>
				
				<view class="w-100 f-s-28 color-999" style="text-align: center;" @click.stop="getCommonList(0,item.id)">
					查看更多评论
				</view>
			<!-- </block> -->
		</block>
	</view>
</template>

<script>
	const isVideo= function(src){
		var videoRegex = /\.(mp4|avi|mov|webm)$/i;
		return videoRegex.test(src) 
	}
	import {goTo} from "@/nav.js"
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	export default {
		name:"circleBox",
		components:{
			"dom-video":isDomVideo
		},
		props:{
			isInfo:{
				type:Boolean,
				default(){
					return false
				}
			},
			showComment:{
				type:Boolean,
				default(){
					return true
				}
			},
			showDel:{
				type:Boolean,
				default(){
					return false
				}
			},
			item:{
				type:Object,
				default(){
					return{}
				}
			},
			showTop:{
				type:Boolean,
				default(){
					return false
				}
			},
		},
		data() {
			return {
				images:[1,1,1,1],
				operate_show:false,
				page:1,
				common_list0:[],
				common_list1:[],
				video_src:"",
				show_video:false
			};
		},
		// mounted() {
		// 	this.getCommonList(0,3)
		// },
		methods:{
			isVideo,
			asss(){
				
			},
			// playVideo(){
				
			// }
			playFullScreen(itm) {
				// this.$refs[id][0].play()
				// console.log(this.$refs['fullScreen'+index])
				// this.video_src = itm
				// this.show_video = true
				// this.$refs.playVideo.play()
			this.$emit("playVideo",{url:itm})
			  // var videoContext = uni.createVideoContext(id, this);
			  // videoContext.play();
			  // videoContext.requestFullScreen();
			},
			goToItem(){
				if(!this.isInfo){
					goTo({url:'/pages/circle/circleInfo?id='+this.item.id})
				}
			},
			getCommonList(type,pid,c_page = 1,index=0){
				let that = this,page = 0
				if(type === 0){
					page = that.page
				}else{
					page = c_page
				}
				that.util.postRequest({
					url:"v1/content/socialize_comment_list",
					data:{
						page,
						rows:10,
						type,
						pid,
					}
				}).then(res=>{
					if(type === 0){
						res.data.data.forEach(val=>{
							val.reply=[]
							val.page=1
						})
					}
					if(page === 1){
						if(res.data.data.length>0){
							if(type === 0){
								that.common_list0 = res.data.data
							}else{
								that.common_list0[index].reply = res.data.data
							}
						}else{
							if(type === 0){
								that.page--
							}else{
								that.common_list0[index].page--
							}
							uni.showToast({
								title:"暂无更多内容",
								icon:"none"
							})
						}
					}else{
						if(res.data.data.length>0){
							if(type === 0){
								that.common_list0 = that.common_list0.concat(res.data.data)
							}else{
								that.common_list0[index].reply = that.common_list0[index].reply.concat(res.data.data)
							}
						}else{
							if(type === 0){
								that.page--
							}else{
								that.common_list0[index].page--
							}
							console.log("ceshi")
							uni.showToast({
								title:"暂无更多内容",
								icon:"none"
							})
						}
					}
					if(type === 0){
						that.page++
					}else{
						that.common_list0[index].page++
					}
				})
			},
			shareCarCircle(item){
				let that = this
				that.util.postRequest({
					url:"v1/content/socialize_share",
					data:{
						socialize_id:this.item.id,
					}
				}).then(res=>{
					console.log(res)
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						summary: res.data.share.summary,
						title:res.data.share.title,
						imageUrl:res.data.share.imageUrl,
						href:res.data.share.href,
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
					that.$emit("updata",true)
				}).catch(e=>{
					uni.showToast({
						title:e.msg ||"请求失败",
						icon:"none"
					})
				})
			},
			showOperate(){
				this.operate_show = !this.operate_show
			},
			editInfo(){
				let item = JSON.stringify(this.item)
				this.$store.commit("changePageTabInfo",item)
				goTo({url:`/pages/pageTab/index?type=5&title=发布卡友圈`})
			},
			postLike(type,source_id,source_type,index,indexs = -1){
				let that = this
				that.util.postRequest({
					url:"v1/content/socialize_praise",
					data:{
						source_id,
						source_type
					}
				}).then(res=>{
					console.log(res)
					if(type === 'b'){
						that.common_list0[index].praise_status = !that.common_list0[index].praise_status
					}
					if(type === 'a'){
						that.item.praise_status = !that.item.praise_status
						that.item.praise_status?that.item.praise_count++:that.item.praise_count--
					}
					if(type === 'c'){
						that.common_list0[index].reply[indexs].praise_status = !that.common_list0[index].reply[indexs].praise_status
					}
					// that.$emit("updata",true)
				}).catch(e=>{
					uni.showToast({
						title:e.msg||"请求失败",
						icon:"none"
					})
				})
				
			},
			showBackContent(typec,socialize_id,pid = 0,top_pid = 0,index=-1,indexs=-1){
				let that = this
				uni.showModal({
					title:"评论/回复",
					editable:true,
					placeholderText:"请输入内容",
					success(res) {
						if(res.confirm){
							console.log(res)
							that.util.postRequest({
								url:"v1/content/socialize_comment",
								data:{
									socialize_id,
									content:res.content,
									pid,
									top_pid
								}
							}).then(cres=>{
								console.log(cres)
								uni.showToast({
									title:"操作成功",
									icon:"none"
								})
								if(typec === 'a'){
									cres.data.page = 1
									cres.data.reply = []
									that.common_list0.unshift(cres.data)
								}
								if(typec === 'b'){
									that.common_list0[index].reply.unshift(cres.data)
								}
								if(typec === 'c'){
									that.common_list0[index].reply.unshift(cres.data)
								}
								// that.$emit("updata",true)
							}).catch(e=>{
								uni.showToast({
									title:e.msg||"请求失败",
									icon:"none"
								})
							})
						}
					}
				})
			},
			getTime(){
				console.log(this.item.createtime)
				if(typeof this.item.createtime === "number"){
					let date = new Date(this.item.createtime*1000)
					let yyyy = date.getFullYear()
					let mm = date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
					let dd = date.getDate()<10?`0${dage.getDate()}`:date.getDate()
					this.item.createtime = `${yyyy}-${mm}-${dd}`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.setting-view{
		position: relative;
		.icon{
			width: 32upx;
			height: 32upx;
		}
		.operate-box{
			position: absolute;
			z-index: 3;
			width: 144upx;
			background: rgba(0, 0, 0, 0.7);
			backdrop-filter: blur(4upx);
			border-radius: 8px;
			right: 0;
			transition: all .2s ease-in;
			// padding: 24upx 0;
			overflow: hidden;
			.item{
				margin-top: 24upx;
				.o-icon{
					width: 38upx;
					height: 38upx;
					margin-right: 16upx;
				}
			}
		}
		.o-height0{
			height: 0;
		}
		.heightauto{
			height: 156upx;
		}
	}
	.comment-del-icon{
		width: 38upx;
		height: 38upx;
		margin-right: 16upx;
	}
	.lick-icona{
		width: 28upx;
		height: 28upx;
		margin-right: 4upx;
	}
	.items{
		width: 100%;
		margin-bottom: 16upx;
		padding: 0 28upx 32upx;
		border-bottom: 8upx solid #F4F4F4;
		.msg-box{}
		.back-user-box{
			width: 100%;
			margin-top: 14upx;
			.left{
				width: 600upx;
				padding: 16upx;
				background: #F5F5F5;
				border-radius: 8upx;
				line-height: 36upx;
				vertical-align: middle;
				.back-avatar{
					width: 32upx;
					height: 32upx;
					margin-right: 8upx;
					border-radius: 50%;
					vertical-align: middle;
				}
			}
		}
		.user-pinglun{
			padding-left: 32upx;
			line-height: 40upx;
		}
		.caozuo-box{
			padding-bottom: 22upx;
			border-bottom: 2upx solid #F4F4F4;
			margin-bottom: 28upx;
			.item{
				margin-right: 80upx;
				.icon{
					width: 36upx;
					height: 36upx;
					margin-right: 4upx;
				}
			}
		}
		.info-image-list{
			width: 100%;
			margin-bottom: 30upx;
			.car-image{
				width: 202upx;
				height:202upx;
				margin-right:2upx;
				margin-bottom:2upx;
				position: relative;
				.video-play-icon{
					width: 100upx;
					height: 100upx;
					position: absolute;
					z-index: 44;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
		}
		.info-box{
			width: 100%;
			line-height: 42upx;
			margin-top: 20upx;
			margin-bottom: 16upx;
		}
		.user-box{
			.del-icon{
				width: 40upx;
				height: 32upx;
			}
			.lick-icon{
				width: 28upx;
				height: 28upx;
				margin-right: 4upx;
			}
			.user-info{
				.avatar{
					width: 64upx;
					height: 64upx;
					margin-right: 12upx;
					border-radius: 50%;
				}
				.avatar2{
					width: 32upx;
					height: 32upx;
					margin-right: 8upx;
					border-radius: 50%;
				}
				.nickname-time-box{
					.name{
						margin-bottom: 2upx;
					}
				}
			}
		}
	}
</style>